"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";

const navItems = [
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "Models", href: "/models" },
    { label: "Contact", href: "/contact" },
];

export default function Navbar() {
    const pathname = usePathname();

    return (
        <nav className="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-[rgba(10,10,10,0.75)] border-b border-[#2a2a2a]">
            <div className="max-w-6xl mx-auto flex justify-between items-center px-2 py-4">
                <div className="text-xl font-semibold tracking-wider text-white select-none">
                    VirtualCell
                </div>

                <ul className="flex space-x-8 text-sm font-medium">
                    {navItems.map((item) => (
                        <li key={item.href}>
                            <Link
                                href={item.href}
                                className={`transition-colors ${
                                    pathname === item.href
                                        ? "text-red-500 border-b-2 border-red-500 pb-1"
                                        : "text-gray-300 hover:text-white"
                                }`}
                            >
                                {item.label}
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>
        </nav>
    );
}
